<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="../templates/TemplatePrincipal.xhtml">
        <ui:define name="top">

        </ui:define>
        <ui:define name="content">
            <h:form>
                <p:panel header="Dados Cliente">
                    <p:tabView>    

                        <p:tab title="Dados pessoais">
                            <h:panelGrid columns="2">
                                <h:outputLabel value="Nome: " for="nome" />
                                <h:inputText id="nome" value="#{clienteController.selected.nome}" title="nome" required="true" requiredMessage="O campo nome é obrigatório"/>
                                <h:outputLabel value="Sobrenome: " for="sobrenome" />
                                <h:inputText id="sobrenome" value="#{clienteController.selected.sobrenome}" title="sobrenome" required="true" requiredMessage="O campo sobrenome é obrigatório"/>
                                <h:outputLabel value="CPF: " for="cpf" />
                                <h:inputText id="cpf" value="#{clienteController.selected.cpf}" title="cpf" required="true" requiredMessage="O campo cpf é obrigatório"/>
                                <h:outputLabel value="RG: " for="rg" />
                                <h:inputText id="rg" value="#{clienteController.selected.rg}" title="rg" required="true" requiredMessage="O campo rg é obrigatório"/>
                                <h:outputLabel value="Data de nascimento: " for="dataNacimento" />
                                <h:inputText id="dataNacimento" value="#{clienteController.selected.dataNacimento}" title="data nascimento" required="true" requiredMessage="O campo dade de nascimento é obrigatório">
                                    <f:convertDateTime pattern="dd/MM/yyyy" />
                                </h:inputText><br/>
                                <h:graphicImage/>

                                <h:commandButton action="#{clienteController.create}" value="Cadastrar"/>
                            </h:panelGrid>
                        </p:tab>

                        <p:tab title="Endereço">
                            <h:panelGrid columns="2">
                                <h:outputLabel value="Endereço" for="endereco" />
                                <h:inputText id="endereco" value="#{clienteController.selected.endereco}" title="endereco" size="30"/>
                                <h:outputLabel value="Bairro: " for="bairro" />
                                <h:inputText id="bairro" value="#{clienteController.selected.bairro}" title="bairro" size="30"/>

                                <p:growl id="msgs" showDetail="true"/>

                                <p:selectOneMenu id="Estado" value="#{clienteController.selected.estadoIdEstado}">
                                    <f:selectItem itemLabel="Select City" itemValue="" />
                                    <f:selectItems value="#{estadoController.itemsAvailableSelectOne}" />
                                    <p:ajax update="Cidade"
                                            
                                </p:selectOneMenu>

                                <p:selectOneMenu id="Cidade" value="#{clienteController.selected.cidadeIdCidade}">
                                    <f:selectItem itemLabel="Selecione Cidade" itemValue="" />
                                    <f:selectItems value="#{cidadeController.itemsAvailableSelectOne}" />
                                </p:selectOneMenu>

                            </h:panelGrid>  
                        </p:tab>
                        <p:tab title="Informações de Contato">
                            <h:panelGrid columns="2">
                                <h:outputLabel value="Email: " for="email" />
                                <h:inputText id="email" value="#{clienteController.selected.email}" title="email"/>
                                <h:outputLabel value="Telefone: " for="telefone"/>
                                <h:inputText id="telefone" value="#{clienteController.selected.telefone}" title="telefone"/>
                            </h:panelGrid>
                        </p:tab>
                    </p:tabView>
                </p:panel>
                <br />
                <h:panelGroup id="messagePanel" layout="block">
                    <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
                </h:panelGroup>
            </h:form>
        </ui:define>
        <ui:define name="bottom">

        </ui:define>
    </ui:composition>

</html>
